<template>
  <div>
    <el-row style="border: #f9f9f9 solid 1px; border-radius: 9px; background-color: rgba(102,100,200,0.12); height: 300px">
      <el-col :span="2">
        <div style="margin-top: 50px; margin-left: 15px">
          <el-image :src="currentUser.avatar" style="width: 100px; height: 100px"/>
        </div>
      </el-col>
      <el-col :span="22">
        <div>
          <div class="padding">昵称：<span>{{ currentUser.userName }}</span></div>
          <div class="padding">账号：<span>{{ currentUser.account }}</span></div>
          <div class="padding">爱好：<span>{{ currentUser.hobby }}</span></div>
          <div class="padding">出生日期：<span>{{ currentUser.birthday }}</span></div>
          <div class="padding">电话：<span>{{ currentUser.phone }}</span></div>
          <div class="padding">性别：<span>{{ currentUser.sex }}</span></div>
          <div class="padding">邮箱：<span>{{ currentUser.email }}</span></div>
        </div>
      </el-col>
      <div>
        <el-button class="btn" type="primary" @click="edit">修改信息</el-button>
      </div>
    </el-row>
    <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
      <el-form v-model="temp">
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :headers="token"
            action="http://localhost:9000/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="temp.avatar" :src="temp.avatar" class="avatar" alt="暂无">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="temp.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="temp.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="temp.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="temp.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="temp.birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="temp.sex" label="男">男</el-radio>
          <el-radio v-model="temp.sex" label="女">女</el-radio>
          <el-radio v-model="temp.sex" label="未知">未知</el-radio>
        </el-form-item>
        <el-form-item label="爱好" :label-width="formLabelWidth">
          <el-select v-model="temp.hobby" placeholder="请选择爱好">
            <el-option v-for="item in options" :key="item.value" :label="item.text"
                       :value="item.text"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "self",
  data() {
    return {
      currentUser: {},
      temp: {},
      options: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      token: {
        token: JSON.parse(localStorage.getItem('loginMes')).token
      }
    }
  },
  created() {
    this.getDict();
  },
  mounted() {
    const query = this.$route.query;
    this.getUserByName(query.userName);
  },
  methods: {
    edit() {
      this.dialogFormVisible = true;
    },
    save() {
      this.dialogFormVisible = false;
      this.$axios.post("/sys-user/update", this.temp).then(res => {
        if (res.data.code === '200') {
          this.$message.success(res.data.data.message);
          localStorage.removeItem("loginMes");
          this.$router.push('/login');
        } else {
          this.$message.error(res.data.data.message)
        }
      })
    },
    getDict() {
      this.$axios.post('/dict-message/listByType', {
        type: 'hobby'
      }).then(res => {
        if (res.data.code === '200') {
          this.options = res.data.data;
        } else {
          this.$message.error(res.data.message)
        }
      });
    },
    getUserByName(name) {
        this.$axios.get("/sys-user/detail",
          {
            params: {
              name: name
            }
          }).then(res => {
          if (res.data.code === '200') {
            this.currentUser = res.data.data;
            this.temp = JSON.parse(JSON.stringify(res.data.data));
          } else {
            this.$message.error(res.data.message);
          }
        })
    },
    handleAvatarSuccess(res) {
      if (res.code === '200') {
        this.temp.avatar = res.data;
      } else {
        alert(res.message);
      }
    }
  }
}
</script>

<style scoped>
.btn {
  margin-top: 30px;
  margin-left: 20px;
}

span {
  margin-left: 10px;
  color: palevioletred;
  font-weight: normal;
}

.padding {
  font-weight: 600;
  margin-top: 10px;
  margin-left: 2%;
  margin-bottom: 5px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.el-input {
  width: 80%;
}
</style>
